<template>
  <div class="comment">
      <h4>发表评论</h4>
      <hr>

      <textarea v-model="text" name="" id="" maxlength="130" placeholder="评论最低130个字"></textarea>

      <mt-button type="primary" size="large" @click="post">发表评论</mt-button>

      <div v-for="(item, index) in list" :key="index" class="list">
        <div class="user">
          <span>第{{index+1}}楼</span>
          <span>用户：{{item.user_name}}</span>
          <span>发表时间：{{item.add_time | dateFormat}}</span>
        </div>

        <div class="text">内容：{{item.content?item.content:'用户很懒什么都没讲'}}</div>
      </div>

      <mt-button v-if="!noMore" size="large" @click="clickMore" type="danger">加载更多</mt-button>
      <div v-else>没有更多了~</div>
  </div>
</template>

<script>
import {api} from '@/common/api.js'
// http://www.liulongbin.top:3005/api/postcomments/:artid
export default {
  data () {
    return {
      list: [],
      pageindex: 1,
      noMore: false,
      text: ''
    }
  },
  props: [
    'newID'
  ],
  created () {
    this.get()
  },
  methods: {
    get () {
      // http://www.liulongbin.top:3005/api/getcomments/87?pageindex=1
      this.$axios.get(`${api}getcomments/${this.newID}?pageindex=${this.pageindex}`).then(res => {
        this.list = this.list.concat(res.data.message)
        this.noMore = !(res.data.message).length
      }).catch(err => {
        console.log(err)
      })
    },
    post () {
      this.$axios.post(`${api}postcomment/${this.newID}`, {content: this.text}).then(res => {
        var msg = {user_name: '匿名用户', add_time: new Date(), content: this.text}
        this.list.unshift(msg)
        this.text = ''
        console.log(res)
      }).catch(err => {
        console.log(err)
      })
    },
    clickMore () {
      this.pageindex += 1
      this.get()
    }
  }
}
</script>

<style lang="scss" scoped>
h4{
  text-align: left
}
  .list{
    text-align: left;
    .user{
      border-radius: 4px;
      background: #aaa;
      font-size: .019rem;
    }
    .text{
      padding: 5px 0 5px;
      text-indent: 2em;
      font-size: .017rem;
    }
  }

</style>
